.datalist {
  width: 100%;
  background: #fff;

  .tipsNews {
    clear: both;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 12px
    height 28px;
    line-height 28px;
    background: #138FF2;
  }

  .dataListCont {
    padding 15px;
    border-bottom: 1px solid #e6e6e6;
    clear: both;

    .list-top {
      margin: 0;
      width: 100%;
      overflow hidden;
      display flex

      .list-top-profile {
        display: inline-block;
        width 32px;
        height 32px;
        max-width: 32px;
        border-radius: 50%;
        padding-left: 0;
        padding-right: 0;

        img {
          width 32px;
          height 32px;
          vertical-align: middle;
        }
      }

      .list-top-info {
        padding-left: 0;
        line-height: 1;
        flex 1
        margin-left 10px;

        .list-top-info-title {
          font-size 14px;
          padding-top 2px;

          a {
            display: block;
            width: 100%;
            font-weight: bold;
            color: #0d0d0d;
          }
        }

        .list-top-info-publishTime {
          clear: both;
          margin-top 5px;
          font-size: 12px;
          color: #939393;
          display flex
          justify-content flex-start

          span {
            display inline-block
            margin-right 5px
          }

          em {
            display inline-block
            font-style normal
            font-size 12px
            color #E14123

            i {
              display inline-block
              width 10px
              height 10px
              background url(/public/img/choice.png) no-repeat
              background-size contain
              vertical-align -1px
            }
          }
        }
      }

      .list-top-attent {
        padding: 0;
        display flex
        justify-content flex-start

        a {
          display: block;
          color: #138FF2;
          font-size 12px;
          margin-top 2px;
          text-align: center;

          em {
            display: none;
          }
        }

        a.attention, a.delete {
          width 60px;
          height 22px;
          line-height 22px;
          border: 1px solid #138FF2;
          border-radius: 4px;
          margin-right 10px
        }

        a.report {
          color #1D2043
          opacity 0.2
          width 20px
          height 20px
          font-size 20px
          line-height 20px
        }

        a.gray {
          color: #939393 !important;
          border: 1px solid #939393 !important;
        }
      }
    }

    .list-mid {
      clear: both;
      margin-top 10px;

      .list-mid-publish-content {
        position: relative;

        .contDesc {
          color: #0d0d0d;
          font-size 16px;
          line-height 28px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
        }

        .queryDetail {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1;

          a {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        p {
          clear: both;
          padding-top 5px;
          font-size 12px;
          margin: 0;
          color: #507DAF;
        }
      }

      .list-mid-publish-img {
        clear: both;
        overflow hidden
        width 100%;

        span {
          display: inline-block;
          margin-right 5px;
          margin-top 10px;
          float left

          img {
            width 80px;
            height 80px;
            border-radius: 2px;
          }
        }
      }
    }

    .list-bot {
      clear: both;
      margin-top 15px;
      height 24px;
      line-height 24px;
      position: relative;
      display flex
      justify-content space-between

      em {
        font-style: normal;
        display: inline-block;
      }

      .coin {
        display: inline-block;
        color: #939393;
        font-size 12px;
        padding: 0;

        span {
          display: inline-block;
          width 15px;
          height 15px;
          margin-right 5px;
          background: url(/public/img/coin.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }
      }

      .dianzan {
        display: inline-block;
        color: #939393;
        font-size 12px;
        padding: 0;

        span {
          display: inline-block;
          width 15px;
          height 15px;
          margin-right 5px;
          background: url(/public/img/zan.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }

      }

      .dianzan.active {
        color: #138FF2;

        span {
          background: url(/public/img/zan-Hover.png) no-repeat left center;
          background-size: contain;
        }
      }

      .sendmsg {
        display: inline-block;
        color: #939393;
        font-size 12px;
        padding: 0;

        span {
          display: inline-block;
          width  16px;
          height 15px;
          margin-right 5px;
          background: url(/public/img/commitNumers.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }
      }

      .attentP {
        float right
        width 30px
      }

      .share {
        display: inline-block;
        color: #939393;
        font-size 12px;
        padding: 0;

        span {
          display: inline-block;
          width  16px;
          height 16px;
          margin-right 5px;
          background: url(/public/img/shareIcon.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }
      }

      .attenPop {
        color: #939393;
        padding: 0;
        text-align: right;
        font-size 20px;
        font-weight: bolder;
        line-height 28px;
      }
    }
  }
}
